import React, {memo, useEffect,useState} from 'react';
import {shallowEqual, useDispatch, useSelector} from 'react-redux'
import { getDisGroupMessageAction } from '../../store/discussionStore/actionCreators';
import { Table,  Space, Divider, Button, Modal, message,Spin } from 'antd';
import { deleteDisGroupRequest } from '../../services/Admin';

export default memo(function DiscussionGroupManage() {
    const {disGroupMessage} = useSelector(state => ({
        disGroupMessage: state.getIn(["disGroups","disGroupMessage"])
    }), shallowEqual)

    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getDisGroupMessageAction());
        console.log(disGroupMessage);
    }, [dispatch, disGroupMessage]);



    //相关自定义状态
    const [isVisable, setIsVisable] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [currentDeleteDisGroup, setCurrentDeleteDisGroup] = useState({});
    const [isReload, setIsReload ] = useState(false);

    //重新刷新页面
    useEffect(() => {

    }, [isReload]);

    //删除文章的回调
    const deleteDisGroup = (text, record) => {
      console.log('deleteuser');
      setCurrentDeleteDisGroup(text);
      setIsVisable(true);
    }

    //弹窗确认
    const onOk = () => {
      console.log('ok');
      setIsLoading(true);
      deleteDisGroupRequest(currentDeleteDisGroup.dis_id).then(res => {
        setIsLoading(false);
        setIsVisable(false);

        if(res.code === 200)
        {
          message.success("讨论组删除成功!");
          setIsReload(true);
        }
        else
        {
          message.error("讨论组删除失败！");
        }
      }).catch(err => {
        setIsLoading(false);
        setIsVisable(false);
        message.error("讨论组删除失败!")

      })
    }


    //弹窗取消
    const onCancel = () => {
      console.log('cancel');
      setIsVisable(false);
    }

    const columns = [
        {
          title: '讨论组id号',
          dataIndex: 'dis_id',
          key: 'dis_id',
          render: text => <a href={'##'}>{text}</a>
            ,
        },
        {
            title: '创建时间',
            dataIndex: 'dis_pub_time',
            key: 'dis_pub_time',
        },
        {
            title: '讨论组主题',
            dataIndex: 'dis_topic_id',
            key: 'dis_topic_id',
            render: topic => {
              return (
                <>
                  {topic.topic_name}
                </>
              )
            }
          },
        {
          title: '操作',
          key: 'action',
          render: (text, record) => (
            <Space size="middle">
              {/* <a href={'###'}>修改</a> */}
              <Button type="link" onClick={e => deleteDisGroup(text, record)}>删除</Button>
            </Space>
          ),
        },
      ];


    return (
        <div>
            <Divider orientation="left">讨论组管理页</Divider>
            <div>
                <Table columns={columns} dataSource={disGroupMessage} style={{minHeigh:"100%"}}/>
            </div>
            <Modal
              title="提示框"
              visible={isVisable}
              onOk={onOk}
              onCancel={onCancel}
              cancelText="取消"
              okText="确定"
            >
              <p>是否确认删除该讨论组？</p>
              <Spin spinning={isLoading}/>
            </Modal>
        </div>
    )
})